<html>

<head>
    <title>过滤器</title>
    <meta charset="utf-8">
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
      <!-- 调用过滤器 -->
        <ul>
            <li v-for="user in users">{{user.name}}性别{{user.sex}}-{{getSex(user.sex)}}</li>
        </ul>
        <p>
            {{capitalizedMessage}}
        </p>
    </div>


    </div>
    <script>
        const { createApp } = Vue // 引入Vue
        var app = createApp({
            el: '#app',
            data() {
                return {
                    users: [
                        { name: '张三', sex: 0 },
                        { name: '李四', sex: 1 },
                    ],
                    message: 'Hello Vue!'
                }
            },
            computed: {
                capitalizedMessage() {
                    return this.message.toLowerCase();
                }
            },
            methods: {
                getSex(value) {
                    return value == 0 ? '男' : '女'
                }
            }
        })
        app.mount('#app')
    </script>
    
</body>

</html>